<template>
  <div class="product-detail">
    <!-- 产品图片轮播 -->
    <div class="product-images">
      <!-- 返回按钮 -->
      <div class="back-button" @click="goBack">
        <span class="back-arrow">‹</span>
      </div>
      
      <div class="main-image">
        <img :src="product.mainImage" :alt="product.name" class="product-image" />
      </div>
      <div class="image-dots">
        <div 
          v-for="(dot, index) in imageDots" 
          :key="index" 
          class="dot" 
          :class="{ active: index === activeImageIndex }"
          @click="setActiveImage(index)"
        ></div>
      </div>
    </div>

    <!-- 产品信息 -->
    <div class="product-info">
      <div class="product-header">
        <h1 class="product-name">{{ product.name }}</h1>
        <div class="wishlist-icon" @click="toggleWishlist">
          <span class="heart">♡</span>
        </div>
      </div>
      
      <div class="product-quantity">{{ product.quantity }}</div>
      
      <div class="price-section">
        <span class="current-price">¥ {{ product.currentPrice }}</span>
        <span class="original-price">¥ {{ product.originalPrice }}</span>
      </div>
      
      <div class="rating-section">
        <div class="rating">
          <span class="star">⭐</span>
          <span class="rating-text">{{ product.rating }} ({{ product.reviews }}条评价)</span>
        </div>
        <div class="stock-info">
          <span class="stock-label">库存</span>
          <span class="stock-number">{{ product.stock }}</span>
        </div>
      </div>
    </div>

    <!-- 基本信息 -->
    <div class="info-section">
      <h3 class="section-title">基本信息</h3>
      <div class="info-item">
        <span class="label">品牌</span>
        <span class="value">{{ product.brand }}</span>
      </div>
      <div class="info-item">
        <span class="label">商品分类</span>
        <span class="value">{{ product.category }}</span>
      </div>
      <div class="info-item">
        <span class="label">适用人群</span>
        <span class="value">{{ product.targetAudience }}</span>
      </div>
    </div>

    <!-- 药店信息 -->
    <div class="info-section">
      <h3 class="section-title">药店信息</h3>
      <div class="info-item">
        <span class="icon">📍</span>
        <span class="label">地址</span>
        <span class="value">{{ pharmacy.address }}</span>
      </div>
      <div class="info-item">
        <span class="icon">🕒</span>
        <span class="label">上班时间</span>
        <div class="time-details">
          <div class="time-row">
            <span class="day">周一至周五</span>
            <span class="time">{{ pharmacy.weekdayHours }}</span>
          </div>
          <div class="time-row">
            <span class="day">周六周日</span>
            <span class="time">{{ pharmacy.weekendHours }}</span>
          </div>
        </div>
      </div>
      <div class="info-item">
        <span class="icon">📞</span>
        <span class="label">热线</span>
        <span class="value">{{ pharmacy.phone }}</span>
      </div>
    </div>

    <!-- 详情标签页 -->
    <div class="tabs-section">
      <div class="tabs">
        <div 
          v-for="tab in tabs" 
          :key="tab.id"
          class="tab" 
          :class="{ active: activeTab === tab.id }"
          @click="setActiveTab(tab.id)"
        >
          {{ tab.name }}
        </div>
      </div>
      
      <div class="tab-content">
        <div v-if="activeTab === 'details'" class="details-content">
          <p class="detail-text">{{ product.description }}</p>
        </div>
        <div v-else-if="activeTab === 'usage'" class="usage-content">
          <p class="usage-text">{{ product.usage }}</p>
        </div>
        <div v-else-if="activeTab === 'comments'" class="comments-content">
          <p class="comments-text">暂无评论</p>
        </div>
        <div v-else-if="activeTab === 'recommendations'" class="recommendations-content">
          <p class="recommendations-text">暂无推荐</p>
        </div>
      </div>
    </div>

    <!-- 加入购物车按钮 -->
    <div class="bottom-button">
      <button class="add-to-cart-btn" @click="addToCart">
        加入购物车
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 产品数据类型定义
interface ProductData {
  id: number
  name: string
  quantity: string
  currentPrice: string
  originalPrice: string
  rating: string
  reviews: string
  stock: string
  brand: string
  category: string
  targetAudience: string
  mainImage: string
  description: string
  usage: string
}

// 产品数据映射
const productsData: Record<number, ProductData> = {
  1: {
    id: 1,
    name: '多维元素片',
    quantity: '片剂 100片',
    currentPrice: '69.80',
    originalPrice: '89.80',
    rating: '4.8',
    reviews: '256',
    stock: '15',
    brand: '多维',
    category: '维生素类',
    targetAudience: '成人',
    mainImage: '/src/views/sow/imgs/v2_sypcz0.svg',
    description: '多维元素片是一种复合维生素制剂，含有多种维生素和矿物质，能够补充人体所需的多种营养素。适用于维生素缺乏症、营养不良、病后恢复期等人群。',
    usage: '使用方法：每日1-2次，每次1片，饭后服用。'
  },
  2: {
    id: 2,
    name: '朗迪碳酸钙',
    quantity: '片剂 100片',
    currentPrice: '69.80',
    originalPrice: '89.80',
    rating: '4.8',
    reviews: '256',
    stock: '12',
    brand: '朗迪',
    category: '钙剂类',
    targetAudience: '成人',
    mainImage: '/src/views/sow/imgs/v2_sypcwt.svg',
    description: '朗迪碳酸钙是一种钙补充剂，主要成分为碳酸钙，能够有效补充人体所需的钙质。适用于骨质疏松、钙缺乏症、妊娠期和哺乳期妇女等人群。',
    usage: '使用方法：每日1-2次，每次1片，饭后服用。'
  },
  3: {
    id: 3,
    name: '多维元素片',
    quantity: '片剂 100片',
    currentPrice: '69.80',
    originalPrice: '89.80',
    rating: '4.8',
    reviews: '256',
    stock: '20',
    brand: '多维',
    category: '维生素类',
    targetAudience: '成人',
    mainImage: '/src/views/sow/imgs/v2_sypcxi.svg',
    description: '多维元素片是一种复合维生素制剂，含有多种维生素和矿物质，能够补充人体所需的多种营养素。适用于维生素缺乏症、营养不良、病后恢复期等人群。',
    usage: '使用方法：每日1-2次，每次1片，饭后服用。'
  },
  4: {
    id: 4,
    name: '朗迪碳酸钙',
    quantity: '片剂 100片',
    currentPrice: '69.80',
    originalPrice: '99.80',
    rating: '4.8',
    reviews: '256',
    stock: '8',
    brand: '朗迪',
    category: '钙剂类',
    targetAudience: '成人',
    mainImage: '/src/views/sow/imgs/v2_sypczp.svg',
    description: '朗迪碳酸钙是一种钙补充剂，主要成分为碳酸钙，能够有效补充人体所需的钙质。适用于骨质疏松、钙缺乏症、妊娠期和哺乳期妇女等人群。',
    usage: '使用方法：每日1-2次，每次1片，饭后服用。'
  },
  5: {
    id: 5,
    name: '多维元素片',
    quantity: '片剂 100片',
    currentPrice: '69.80',
    originalPrice: '89.80',
    rating: '4.8',
    reviews: '256',
    stock: '18',
    brand: '多维',
    category: '维生素类',
    targetAudience: '成人',
    mainImage: '/src/views/sow/imgs/v2_sypcz0.svg',
    description: '多维元素片是一种复合维生素制剂，含有多种维生素和矿物质，能够补充人体所需的多种营养素。适用于维生素缺乏症、营养不良、病后恢复期等人群。',
    usage: '使用方法：每日1-2次，每次1片，饭后服用。'
  },
  6: {
    id: 6,
    name: '朗迪碳酸钙',
    quantity: '片剂 100片',
    currentPrice: '69.80',
    originalPrice: '89.80',
    rating: '4.8',
    reviews: '256',
    stock: '10',
    brand: '朗迪',
    category: '钙剂类',
    targetAudience: '成人',
    mainImage: '/src/views/sow/imgs/v2_sypcy2.svg',
    description: '朗迪碳酸钙是一种钙补充剂，主要成分为碳酸钙，能够有效补充人体所需的钙质。适用于骨质疏松、钙缺乏症、妊娠期和哺乳期妇女等人群。',
    usage: '使用方法：每日1-2次，每次1片，饭后服用。'
  }
}

// 产品数据
const product = ref<ProductData>(productsData[1])

// 药店信息
const pharmacy = ref({
  address: '北京市丰台区西四环西路119号',
  weekdayHours: '上午 8:00-12:00 & 下午 13:00-20:00',
  weekendHours: '上午 8:00-12:00 & 下午 13:00-20:00',
  phone: '400-666-8888'
})

// 图片轮播
const imageDots = ref([1, 2, 3, 4, 5])
const activeImageIndex = ref(1)

// 标签页
const tabs = ref([
  { id: 'details', name: '详情' },
  { id: 'usage', name: '使用方法' },
  { id: 'comments', name: '评论' },
  { id: 'recommendations', name: '推荐' }
])
const activeTab = ref('details')

// 方法
const setActiveImage = (index: number) => {
  activeImageIndex.value = index
}

const setActiveTab = (tabId: string) => {
  activeTab.value = tabId
}

const toggleWishlist = () => {
  console.log('添加到收藏')
}

const addToCart = () => {
  console.log('加入购物车')
  
  // 创建购物车商品数据
  const cartItem = {
    id: product.value.id,
    name: product.value.name,
    specification: product.value.quantity,
    price: product.value.currentPrice,
    quantity: 1,
    image: product.value.mainImage
  }
  
  // 读取现有的购物车数据
  const existingCartItems = localStorage.getItem('cartItems')
  let cartItems = []
  
  if (existingCartItems) {
    cartItems = JSON.parse(existingCartItems)
    
    // 检查商品是否已存在
    const existingItemIndex = cartItems.findIndex((item: any) => item.id === cartItem.id)
    
    if (existingItemIndex > -1) {
      // 如果商品已存在，增加数量
      cartItems[existingItemIndex].quantity++
    } else {
      // 如果商品不存在，添加新商品
      cartItems.push(cartItem)
    }
  } else {
    // 如果购物车为空，添加第一个商品
    cartItems = [cartItem]
  }
  
  // 保存更新后的购物车数据
  localStorage.setItem('cartItems', JSON.stringify(cartItems))
  
  // 跳转到购物车页面
  router.push('/shopping-cart')
}

const goBack = () => {
  router.back()
}

onMounted(() => {
  // 从路由参数获取产品ID
  const productId = Number(route.params.id)
  console.log('产品ID:', productId)
  
  // 根据产品ID加载对应的产品数据
  if (productsData[productId]) {
    product.value = productsData[productId]
  } else {
    // 如果找不到对应的产品，使用默认产品
    product.value = productsData[1]
    console.warn(`未找到产品ID ${productId}，使用默认产品`)
  }
})
</script>

<style scoped>
.product-detail {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: white;
  min-height: 100vh;
  padding-bottom: 80px;
}

/* 产品图片轮播 */
.product-images {
  position: relative;
  background: white;
  padding: 20px;
}

/* 返回按钮 */
.back-button {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 48px;
  height: 48px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.88) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
}

.back-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(145deg, rgba(74, 144, 226, 0.1) 0%, transparent 50%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.back-button:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.92) 100%);
  transform: scale(1.1) translateY(-2px);
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.back-button:hover::before {
  opacity: 1;
}

.back-button:active {
  transform: scale(0.92);
  transition: all 0.15s ease;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.back-arrow {
  font-size: 28px;
  color: #4A90E2;
  font-weight: 500;
  line-height: 1;
  margin-left: -1px;
  margin-top: -1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.back-button:hover .back-arrow {
  color: #357ABD;
  transform: scale(1.05);
}

.main-image {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.product-image {
  width: 100%;
  max-width: 300px;
  height: 200px;
  object-fit: contain;
  border-radius: 12px;
}

.image-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dot.active {
  background: #4A90E2;
  transform: scale(1.2);
}

/* 产品信息 */
.product-info {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.product-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.product-name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin: 0;
  flex: 1;
  line-height: 1.3;
}

.wishlist-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 12px;
}

.heart {
  font-size: 20px;
  color: #666;
  transition: color 0.2s ease;
}

.wishlist-icon:hover .heart {
  color: #ff6b6b;
}

.product-quantity {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
}

.price-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.current-price {
  font-size: 24px;
  font-weight: bold;
  color: #4CAF50;
}

.original-price {
  font-size: 16px;
  color: #999;
  text-decoration: line-through;
}

.rating-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rating {
  display: flex;
  align-items: center;
  gap: 4px;
}

.star {
  font-size: 16px;
  color: #FFD700;
}

.rating-text {
  font-size: 14px;
  color: #666;
}

.stock-info {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #4CAF50;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.stock-label {
  font-weight: 500;
}

.stock-number {
  font-weight: bold;
}

/* 信息部分 */
.info-section {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 0 0 16px 0;
}

.info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 8px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.icon {
  font-size: 16px;
  margin-right: 4px;
  flex-shrink: 0;
}

.label {
  font-size: 14px;
  color: #666;
  min-width: 60px;
  flex-shrink: 0;
}

.value {
  font-size: 14px;
  color: #333;
  flex: 1;
}

.time-details {
  flex: 1;
}

.time-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.time-row:last-child {
  margin-bottom: 0;
}

.day {
  font-size: 14px;
  color: #666;
}

.time {
  font-size: 14px;
  color: #333;
}

/* 标签页 */
.tabs-section {
  padding: 20px;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 20px;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}

.tab.active {
  color: #4A90E2;
  font-weight: 600;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #4A90E2;
}

.tab-content {
  min-height: 200px;
}

.detail-text, .usage-text, .comments-text, .recommendations-text {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin: 0;
}

/* 底部按钮 */
.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 20px;
  background: white;
  border-top: 1px solid #e0e0e0;
  z-index: 1000;
}

.add-to-cart-btn {
  width: 100%;
  background: #4A90E2;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.add-to-cart-btn:hover {
  background: #357ABD;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .product-images {
    padding: 16px;
  }
  
  .back-button {
    top: 16px;
    left: 16px;
    width: 44px;
    height: 44px;
  }
  
  .back-arrow {
    font-size: 24px;
    margin-left: -1px;
    margin-top: -1px;
  }
  
  .product-image {
    height: 180px;
  }
  
  .product-info {
    padding: 16px;
  }
  
  .product-name {
    font-size: 18px;
  }
  
  .current-price {
    font-size: 22px;
  }
  
  .info-section {
    padding: 16px;
  }
  
  .tabs-section {
    padding: 16px;
  }
  
  .bottom-button {
    padding: 12px 16px;
  }
  
  .add-to-cart-btn {
    padding: 14px;
    font-size: 15px;
  }
}
</style> 